<template>
	<div class="table">
		<div v-for="(value,key,index) in item">		
			<van-swipe-cell :before-close="beforeClose" :disabled="disabled" :stop-propagation="false">
			<p class="title" v-if="key !== '无'">{{key}}</p>
			<div class="title-nub"><div class="ball">{{index_table+1}}</div></div>
			  <van-cell v-for="item2 in value" :key="item2.name" :border="false" :title="item2.name">
				  <template #default>
					<span class="deep" v-html="item2.value"></span>
				  </template>
			  </van-cell>
			  <template #right>
				<van-button square type="danger" text="删除" class="delete-button"/>
			  </template>
			</van-swipe-cell>
		</div>
	</div>
</template>

<script>
	import { Dialog } from 'vant';
	import Vue from 'vue';
	Vue.use(Dialog);
	export default{
		props:['item','num','fromId','disabled','index_table'],
		methods: {
		    // position 为关闭时点击的位置
		    // instance 为对应的 SwipeCell 实例
		    beforeClose({ position, instance },val) {
		      switch (position) {
		        case 'left':
		        case 'cell':
		        case 'outside':
		          instance.close();
		          break;
		        case 'right':
		          Dialog.confirm({
		            message: '确定删除吗？',
		          }).then(() => {
					  let arr =[this.fromId,this.num]
					  this.$emit('deletTable',arr)
		            instance.close();
		          }).catch(()=>{
					  console.log('取消')
				  })
		          break;
		      }
		    }
		  }
	}
</script>

<style lang="scss" scoped>
	.deep {
		/deep/ .label {
			color: #FFFFFF !important;
			padding: vw(3) vw(8);
		}
	}
	 .delete-button {
	    height: 100%;
	  }
	  .table{
		border-bottom: vw(1) solid $line-1;
	  }
	  .title{
		color: red;
		background-color: #FFFFFF;
	  }
	  // .table{
		 //  .van-cell{
			//   padding: vw(2) 16px; 
		 //  }
	  // }
	  .title-nub{
		  width: 100%;
		  padding: vw(8) 0;
		  border-bottom: 1px dashed $line-1;
		  background-color: #FFFFFF;
	  }
	  .ball{
		  width: 16px;
		  height: 16px;
		  line-height: 17px;
		  text-align: center;
		  color: #FFFFFF;
		  background-color: red;
		  border-radius: 50%;
		  font-size: vw(12);
		  margin-left: 16px;
	  }
	  .van-cell {	  
	  	/deep/ .van-cell__title {
	  		// color: #969799;
	  		font-size: vw(13);
	  	}	  
	  	/deep/ .van-cell__value {
	  		// color: #323233;
	  		font-size: vw(13);
	  	}
	  }
</style>
